<!--
 * @Author: your name
 * @Date: 2020-01-06 18:21:28
 * @LastEditTime : 2020-01-07 14:19:38
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \team9_shop\src\components\goods\goodsfilter.vue
 -->
<template>
  <div>
    <!-- 头部搜索部分 -->
    <div class="topBox">
      <van-icon name="arrow-left" color="#fffff" size="25" @click="goBack" />
      <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" @search="onSearch"></van-search>
    </div>
    <!-- 筛选部分 -->
    <van-dropdown-menu active-color="#ee0a24">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item title="销量" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item title="筛选" />
    </van-dropdown-menu>
    <!-- 详细筛选部分 -->
    <div class="pro_filter_more">
      <ul class="show_more">
        <li class="item">
          <a href="javascript:;">京东物流</a>
        </li>
        <li class="item" v-for="(item,i) in more_show" :key="i" @click="show(i)">
          <a href="javascript:;">
            <span>
              {{item}}
              <i>
                <van-icon :name="activeIndex === i ? 'arrow-up':'arrow-down'" />
              </i>
            </span>
          </a>
        </li>
      </ul>
      <div class="more_box" v-for="(item, i) in listAll" :key="i" v-if="activeIndex === i">
        <van-checkbox-group v-model="result">
          <van-checkbox :name="item1" v-for="(item1, i) in item" :key="i">{{item1}}</van-checkbox>
        </van-checkbox-group>
        <div class="buttonBox">
          <van-button class="firstBtn" type="default">取消</van-button>
          <van-button type="danger">确认</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 搜索框绑定的数据
      value: "",
      // 筛选数据
      value1: 0,
      value2: "a",
      option1: [
        { text: "综合", value: 0 },
        { text: "最新上架", value: 1 },
        { text: "价格最低", value: 2 },
        { text: "价格最高", value: 3 },
        { text: "评论最多", value: 4 }
      ],
      option2: [
        { text: "有货优先", value: "a" },
        { text: "货到付款", value: "b" },
        { text: "京东国际", value: "c" },
        { text: "PLUS专享促销", value: "d" },
        { text: "促销商品", value: "e" },
        { text: "配送全球", value: "f" }
      ],
      // 复选框数据
      result: ["a"],
      // 控制复选框的选中状态
      checked: false,
      // 具体筛选数据
      more_show: ["品牌", "类型", "连接方式", "轴体类型", "轴体品牌"],
      listAll: [
        ["罗技", "雷蛇", "达优尔", "雷神", "戴尔"],
        ["机械键盘", "薄膜键盘", "数字键盘", "超薄键盘", "个性定制键盘"],
        ["有线", "无线", "蓝牙", "多模式"],
        ["青轴", "红轴", "黑轴", "茶轴", "光轴"],
        ["有数字键盘", "无数字键盘"]
      ],
      // 控制小箭头互斥
      activeIndex: -1,
      // 具体筛选内容
      more_content: []
    };
  },
  created() {},
  methods: {
    // 点击左上角箭头返回事件
    goBack() {
      this.$router.go(-1);
    },
    // 搜索框事件
    onSearch() {},
    // 筛选事件
    onConfirm() {
      this.$refs.item.toggle();
    },
    // 展开筛选条件
    show(index) {
      if (this.activeIndex === index) {
        this.activeIndex = -1;
      } else {
        this.activeIndex = index;
      }
    }
  }
};
</script>


<style lang="less" scoped>
.topBox {
  display: flex;
  justify-content: space-around;
  border-bottom: 0.1px solid #ccc;
  .van-icon {
    flex: 5%;
    line-height: 56px;
    margin-left: 8px;
  }
  .van-search {
    flex: 95%;
  }
}
.pro_filter_more {
  min-height: 45px;
  font-size: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}
.show_more {
  overflow: hidden;
  overflow-x: auto;
  margin-top: 10px;
  padding: 10px 5px 10px 15px;
  vertical-align: text-top;
  white-space: nowrap;
  z-index: 2;
}
.item {
  float: none;
  display: inline-block;
  width: 24%;
  padding-right: 6px;
  vertical-align: top;
  text-align: center;
  a {
    display: block;
    position: relative;
    padding: 0 5px;
    height: 25px;
    line-height: 25px;
    color: #666;
    background-color: #f2f2f7;
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .i {
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -2px;
      width: 8px;
      height: 5px;
      background-size: 8px auto;
    }
  }
}
.more_box {
  flex-direction: column;
  display: flex;
  justify-content: space-between;
  width: 100%;
  .van-checkbox-group {
    width: 100%;
  }
}
.buttonBox {
  display: flex;
  justify-content: space-between;
  .van-button {
    flex: 50%;
  }
  .firstBtn {
    color: red;
  }
}
</style>
